<template>
  <t-config-provider :global-config="globalLocale">
        <t-table
        row-key="id"
        :data="data?.list"
        :columns="columns"
        :pagination="pagination"
        cell-empty-content="-"
        resizable
        lazy-load
        @change="rehandleChange"
      >
    </t-table>
    </t-config-provider>
</template>
<script lang="jsx" setup>
import { ref } from 'vue';
import { CaretDownSmallIcon } from 'tdesign-icons-vue-next';
import { removeUser,forbidUser } from "@/api/sjhg/user";
import { MessagePlugin } from "tdesign-vue-next";
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})
const pagination = reactive({
  total: props.data.total,
  showJumper: true,
  current: 1, // 当前页码
  pageSize: 10, // 每页条数
});

const globalLocale = ref({
  table: {
    sortIcon: (h) => h && <CaretDownSmallIcon size="16px" />,
  },
});    

const refreshData = (total) => {
  pagination.current = 1
  pagination.pageSize = 10
  pagination.total = total
}

// 2. 明确暴露方法
defineExpose({
  refreshData
})
const emit = defineEmits(["refreshList"]);
const rehandleChange = (changeParams, triggerAndData) => {
  // console.log('分页、排序、过滤等发生变化时会触发 change 事件：', changeParams, triggerAndData);
  console.log('=rehandleChange==>',changeParams,triggerAndData)
  if(changeParams?.sorter){//排序
    pagination.current = 1
    emit('refreshList',changeParams)
  }else if(changeParams?.pagination){ //分页
    pagination.current = changeParams.pagination.current;
    pagination.pageSize = changeParams.pagination.pageSize;
    emit('refreshList',changeParams)
  }else{
    pagination.current = 1
    emit('refreshList','')
  }
};

const columns = ref([
  { colKey: 'userName', title: '用户名' 
  },
  { colKey: 'companyName', title: '公司名称',ellipsis: true},
  { colKey: 'nickName', title: '姓名'},
  // { colKey: 'password', title: '密码', wdith:'100' },
  { colKey: 'updateTime', title:'提交时间',
  width:'240',
    sorter: true, // 启用排序
  },
  { colKey: 'status',
   title: '操作权限',
   sorter:true,
   width:'160',
    cell:(h,{row}) => (
      // 0是正常  1是停用
      <t-popconfirm  onConfirm={ ()=> handleStatusChange(row.userId,row.status) } confirm-btn="确定" theme="warning" content={row.status === '0' ? '确定要停用该用户吗？' : '确定要恢复该用户吗？'}>
      <t-switch
        value={row.status}
        customValue={['0', '1']}
      />
    </t-popconfirm>
    ),
  },
  {
      colKey: 'operation',
      title: '操作',
      width:'120',
      cell: (h, { row }) => (
        <t-popconfirm  onConfirm={ ()=> handleRemove(row.userId) } confirm-btn="移除" theme="warning" content="确定移除此条权限吗?">
          <t-link hover="color" theme="primary" >
            移除
          </t-link>
        </t-popconfirm>
      ),
    },
]);
//---------------------------------------------移除账号---------------------------------------------
const handleRemove = (id) =>{
  let params = {}
    params.userId = id
    removeUser(params)
      .then((res) => {
        if (res.code == 200) {
          emit("refreshList");
          MessagePlugin.success(res.data);
        } else {
          MessagePlugin.error(res.data);
        }
      })
      .finally(() => {
        
      });
};

//-------------------------------是否禁用用户  0是正常  1是停用-----------------------------------------
const handleStatusChange = (id, newStatus) =>{
 let params = {}
    params.userId = id
    if(newStatus == '0'){
      params.status = '1'
    }else{
      params.status = '0'
    }
    // params.status = newStatus
    forbidUser(params)
      .then((res) => {
        if (res.code == 200) {
          emit("refreshList");
          MessagePlugin.success(res.data);
        } else {
          MessagePlugin.error(res.data);
        }
      })
      .finally(() => {
      });
};

</script>
<style lang="scss" scoped>
:deep(.t-table__double-icons) {
    color: #C9CDD4;
}
:deep(.t-table__double-icons .t-table-sort-asc ){
    top: 3px;
}
:deep(.t-table__double-icons .t-table-sort-desc) {
    bottom: 3px;
}
:deep(.t-pagination__number ){
    color: #4E5969;
    border: 1px solid #fff;
    font-weight: 600;
}
:deep(.t-pagination__number.t-is-current ){
    background-color: #E8F3FF;
    border: 1px solid #E8F3FF;
    color: #165DFF;
    font-weight: 600;
}
:deep(.t-pagination__total ){
  flex: none;
  margin-right: 10px;
  color: #1D2129;
}


:deep(.t-table__content) {
  border: 1px solid #E5E6EB;
  border-radius: 8px;
}
:deep(.t-table__header >tr) {
  background-color: #F7F8FA;
}
// :deep(.t-table__th-cell-inner) {
//   color: #4E5969;
//   font-size: 14px;
//   font-weight: 600;
// }
.home-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.top-container{
  display: flex;
  height: 88px;
  background: var(--bg-white);
  border-radius: 8px;
  padding: 0 16px;
  position: relative;
  &__img{
    width: 56px;
    height: 56px;
    margin-right: 10px;
    margin-top: 16px;
  }
  &__title{
      color: #565960;
      font-size: 12px;
      margin-top: 16px;
    }
   
    &__value{
      color: #252931;
      font-size: 18px;
      font-weight: bold;
      margin-top: 16px;
    }  
    &__btn{
      right: 16px;
      top: 16px;
      position: absolute;
      color: #1966FF;
    }
}
.index {
  padding: 0;
  margin-top: 16px;
}
</style>
